<template>
  <div>
    <CollapsePanel title="基本信息" name="1" :default-expanded="true">
      <div v-for="(item, index) in descriptionsData" :key="index">
        <PlusDescriptions :column="3" :columns="columns" :data="item" />
      </div>
    </CollapsePanel>
    <div class="p-20 text-center bg-white">
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { PlusColumn, RecordType } from '@wlydfe/pro-ui'
import { getOptionLabel, priceToThousands } from '@wlydfe/core'
import { creditmanageApi } from '@/api'
import CollapsePanel from '@/components/CollapsePanel/CollapsePanel.vue'
import { useEnum } from '@/composables/enum/useEnum'

const router = useRouter()
const route = useRoute()
const enumConfig = useEnum([CommonDictEnum.NEWEDZTLX])
onMounted(() => {
  if (route.query.id) {
    getList(route.query.id)
  }
})
const descriptionsData = ref<RecordType>({})
const getList = async id => {
  try {
    const { succeed, model } = await creditmanageApi.getLimitDetail(id)
    if (succeed) {
      descriptionsData.value = model || {}
    }
  } catch {}
}

const goBack = () => {
  router.go(-1)
}
const columns: PlusColumn[] = [
  {
    label: '企业名称',
    width: 120,
    prop: 'companyName',
  },
  {
    label: '金融机构',
    width: 120,
    prop: 'financialInstitution',
  },
  {
    label: '金融产品',
    width: 120,
    prop: 'financialProductType',
    valueType: 'select',
    options: financialProductTypeOptions,
    render: (value, { row }) => {
      return row.financialProductType && row.financialInstitution === '南京银行股份有限公司'
        ? getOptionLabel(financialProductTypeOptions, value)
        : '-'
    },
  },
  {
    label: '授信额度(元)',
    prop: 'totalAmt',
    render: value => {
      return priceToThousands(value)
    },
  },
  {
    label: '剩余额度(元)',
    prop: 'usableAmt',
    render: value => {
      return priceToThousands(value)
    },
  },
  {
    label: '已用额度(元)',
    prop: 'usedAmt',
    render: value => {
      return priceToThousands(value)
    },
  },
  {
    label: '冻结额度(元)',
    prop: 'freezeAmt',
    render: value => {
      return priceToThousands(value)
    },
  },
  {
    label: '起始日期',
    width: 190,
    prop: 'startDate',
    valueType: 'date-picker',
    fieldProps: {
      format: 'YYYY-MM-DD',
    },
  },
  {
    label: '到期日期',
    width: 190,
    prop: 'endDate',
    valueType: 'date-picker',
    fieldProps: {
      format: 'YYYY-MM-DD',
    },
  },
  {
    label: '额度是否循环',
    prop: 'limitCycleFlag',
    valueType: 'select',
    options: [
      {
        label: '否',
        value: '0',
      },
      {
        label: '是',
        value: '1',
      },
    ],
  },
  {
    label: '额度状态',
    prop: 'status',
    valueType: 'select',
    options: enumConfig[CommonDictEnum.NEWEDZTLX],
  },
  {
    label: '授信类型',
    prop: 'creditType',
    render: value => {
      return '融资企业授信'
    },
  },
]
</script>
